<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">


    <title>jQuery WeUI</title>

    <link rel="stylesheet" href="__PUBLIC__/jquery-weui/lib/weui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/jquery-weui/css/jquery-weui.css">

    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/jquery-weui/demos/css/demos.css">

    <script src="__PUBLIC__/jquery-weui/lib/jquery-2.1.4.js"></script>
    <script src="__PUBLIC__/jquery-weui/js/jquery-weui.js"></script>
    <script src="__PUBLIC__/jquery-weui/js/swiper.js"></script>


    <style>
        .weui_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            width: auto;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            color: #D9D9D9;
        }
    </style>

</head>

<body ontouchstart>
<!--响应式布局图片-->
<style>
    .center-block {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }
</style>
<!-- <img src="img/banner1.png" class="img-responsive center-block" alt="Responsive image"> -->


<!--轮播器-->
<style>
    .swiper-container .dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        z-index: 10;
    }

    .swiper-container .dots .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 3px;
        background-color: #888;
        background-repeat: no-repeat;
        background-size: 18px 6px;
        background-position: 0 0;
    }

    .swiper-container .dots .dot.active {
        background-color: #fff;
        background-position: -9px 0;
    }

</style>

<block name="list">
    <div class="weui_tab">
        <div class="weui_tab_bd">

            <div class="swiper-container" style="margin-top: 5px;">

                <div class="swiper-wrapper">
                    <notempty name="dat">
                        <foreach name="dat" item="value">
                            <div class="swiper-slide">
                                <a href="{$value['url']}">
                                    <img class="img-responsive center-block" src="__ROOT__{$value['picture']}" alt=""/>
                                </a>
                            </div>
                        </foreach>
                        <else/>
                        <div class="swiper-slide">
                            <a href="http://pfinal.cn">
                                <img class="img-responsive center-block" src="__PUBLIC__/img/banner1.png" alt=""/>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="http://pfinal.cn">
                                <img class="img-responsive center-block" src="__PUBLIC__/img/banner1.png" alt=""/>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="http://pfinal.cn">
                                <img class="img-responsive center-block" src="__PUBLIC__/img/banner1.png" alt=""/>
                            </a>
                        </div>
                    </notempty>
                </div>
                <div class="dots"></div>
            </div>
            <script type="text/javascript">
                new Swiper('.swiper-container', {
                    loop: true,
                    autoplay: 3000,
                    pagination: '.dots',
                    bulletClass: "dot",
                    bulletActiveClass: "active"
                });
            </script>
            <style>
                a {
                    text-decoration: none;
                }

                .movie-name {
                    font-weight: bold;
                }

                .movie-summary {
                    color: #747474;
                }

                .movie-description {
                    color: #D8D8D8;
                }

                .movie-point {
                    color: #E48A8B;
                    font-weight: bold;
                    font-size: 20px;
                }
            </style>
            <notempty name="data">
                <foreach name="data" item="val">
                    <div class="weui_cell">
                        <div class="weui_cell_hd"><img style="width: 80px;height:110px;"
                                                       src="__ROOT__{$val['cover']}">
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p class="movie-name">{$val['name']}</p>
                            <p class="movie-summary">{$val['summary']}</p>
                            <p class="movie-description">{$val['actore']}</p>
                        </div>
                        <div class="weui_cell_ft">
                            <div class="movie-point">{$val['comment']}</div>
                            <br>
                            <div><a href="{:U('Cinema/detail',['id'=>$val['id']])}"
                                    class="weui_btn weui_btn_mini weui_btn_primary"
                                    style="text-decoration: none;">购票</a>
                            </div>
                        </div>
                    </div>
                </foreach>
            </notempty>

        </div>
</block>

<div class="weui_tabbar">
    <a href="{:U('Index/index')}" class="weui_tabbar_item weui_bar_item_on" style="text-decoration: none;">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-home" style="font-size: 22px;"></span>
        </div>
        <p class="weui_tabbar_label">主页</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item" style="text-decoration: none;">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-facetime-video" style="font-size: 22px;"></span>
        </div>
        <p class="weui_tabbar_label">影院</p>
    </a>
    <a href="javascript:;" class="weui_tabbar_item" style="text-decoration: none;">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-gift" style="font-size: 22px;"></span>
        </div>
        <p class="weui_tabbar_label">周边</p>
    </a>
    <a href="{:U('Member/index')}" class="weui_tabbar_item" style="text-decoration: none;">
        <div class="weui_tabbar_icon">
            <span class="glyphicon glyphicon-user" style="font-size: 22px;"></span>
        </div>
        <p class="weui_tabbar_label">我的</p>
    </a>
</div>
</div>

</body>
</html>